<template>
	<div class="artContent-container">
		<!-- 文章详情标题 -->
		<van-nav-bar
			fixed
			placeholder
			title="文章详情"
			left-arrow
			@click-left="$router.back()"
		/>

		<!-- 文章容器 -->
		<div class="article-box">
			<!-- 文章标题 -->
			<h3 class="articleTitle">
				{{ content.title }}
			</h3>
			<!-- 作者信息 -->
			<div class="author-box">
				<van-image round fit="cover" :src="content.aut_photo" />
				<div class="author-info">
					<span>{{ content.aut_name }}</span>
					<span>{{ content.pubdate | relativeTime }}</span>
				</div>
				<van-button size="small" round type="info">
					<van-icon name="plus" />
					关注
				</van-button>
			</div>
			<!-- 文章内容 -->
			<div v-html="content.content" class="content"></div>
			<!-- 告诉服务器没有来源：也就是匿名 -->
			<meta name="referrer" content="no-referrer" />
		</div>

		<!-- 底部评论以及发表评论组件 -->
		<comments />
	</div>
</template>

<script>
import { getContentAPI } from "@/api/articles";
import Comments from "./Comments.vue";
export default {
	components: { Comments },
	data() {
		return {
			content: {},
		};
	},
	created() {
		this.articleContent();
	},
	methods: {
		// 获取文章详情
		async articleContent() {
			const res = await getContentAPI(this.$route.query.id);
			this.content = res.data;
			// console.log(res);
		},
	},
};
</script>

<style lang='less' scoped>
.artContent-container {
	.articleTitle {
		font-size: 30px;
	}
	// ----------文章内容-----------
	.article-box {
		padding: 10px;
		.author-box {
			margin: 10px 0;
			display: flex;
			align-items: center;

			::v-deep .van-image {
				width: 70px;
				height: 70px;
			}
			.author-info {
				display: flex;
				flex-direction: column;
				margin-left: 10px;
				span:nth-child(2) {
					color: #808080;
					font-size: 12px;
					margin-top: 5px;
				}
			}
			.van-button {
				position: absolute;
				right: 10px;
			}
		}
		.content {
			::v-deep pre {
				background-color: #000;
				color: #fff;
				overflow: auto;
				width: 100%;
			}
			::v-deep p {
				background-color: #000;
				color: #fff;
				word-break: break-all;
			}
			::v-deep img {
				width: 100%;
			}
		}
	}

}
</style>